<template>
  <div class="home-view">
    <!-- 头部 -->
    <el-header style="height: 60px; line-height: 60px; background-color: #333; color: #fff; padding-left: 20px; display: flex; justify-content: space-between; align-items: center;">
      <span><i class="el-icon-house"></i> 熹心健康体检系统</span>
      <div style="display: flex; align-items: center;">
        <span style="margin-right: 20px;">系统管理员：{{ userName }}</span>
        <el-button type="danger" size="small" @click="logout">退出</el-button>
      </div>
    </el-header>

    <!-- 侧边栏 -->
    <el-aside width="200px" style="background-color: #333; color: #fff;">
      <el-menu style="border-width: 0; background-color: #333; color: #fff;">
        <el-menu-item index="1">
          <i class="el-icon-s-home"></i>
          <span>首页</span>
        </el-menu-item>
        <el-menu-item index="2">
          <i class="el-icon-date"></i>
          <span>体检预约</span>
        </el-menu-item>
        <el-menu-item index="3">
          <i class="el-icon-tickets"></i>
          <span>预约列表</span>
        </el-menu-item>
        <el-menu-item index="4">
          <i class="el-icon-search"></i>
          <span>体检客户查询</span>
        </el-menu-item>
      </el-menu>
    </el-aside>

    <!-- 主内容区 -->
    <el-main style="padding: 20px; flex: 1;">
      <!-- 顶部卡片统计 -->
      <el-row :gutter="20">
        <el-col :span="6">
          <el-card shadow="hover" style="height: 100px; text-align: center; display: flex; justify-content: center; align-items: center;">
            <div style="display: inline-block; margin: 0 20px; color: #fff; background-color: #409EFF; width: 50px; height: 50px; border-radius: 5px; line-height: 50px;">
              <i class="el-icon-user"></i>
            </div>
            <div>
              <h2>103</h2>
              <p>用户总数</p>
            </div>
          </el-card>
        </el-col>
        <!-- 其他卡片统计区域省略 -->
      </el-row>

      <!-- 中间图表区域 -->
      <el-row :gutter="20" style="margin-top: 20px;">
        <el-col :span="8" style="flex: 1;">
          <el-card shadow="hover">
            <div slot="header" style="text-align: center;">用户访问来源</div>
            <div id="userReferralPieChart" style="height: 400px;"></div>
          </el-card>
        </el-col>
        <el-col :span="8" style="flex: 1;">
          <el-card shadow="hover">
            <div slot="header" style="text-align: center;">体检项统计</div>
            <div id="examItemBarChart" style="height: 400px;"></div>
          </el-card>
        </el-col>
        <el-col :span="8" style="flex: 1;">
          <el-card shadow="hover">
            <div slot="header" style="text-align: center;">体检项目占比</div>
            <div id="examItemPolarChart" style="height: 400px;"></div>
          </el-card>
        </el-col>
      </el-row>

      <!-- 底部折线图 -->
      <el-card style="margin-top: 20px;">
        <div slot="header" style="text-align: center;">各店全年销售额</div>
        <div id="storeSalesLineChart" style="height: 400px;"></div>
      </el-card>
    </el-main>
  </div>
</template>

<script>

export default {
  name: 'HomeView',
  data() {
    return {
      userName: 'admin',
    };
  },
  methods: {
    logout() {
      this.$message.success('退出成功！');
      this.$router.push('/login');
    },
    initCharts() {
      // ECharts 初始化逻辑
      // （与之前一致，略）
    },
  },
  mounted() {
    this.initCharts();
  },
};
</script>

<style scoped>
.home-view {
  height: 100vh;
  display: flex;
}

.el-header {
  color: #fff;
}

.el-aside {
  background-color: #333;
  color: #fff;
  width: 200px !important;
  overflow: hidden;
}

.el-main {
  background-color: #f0f2f5;
  padding: 20px;
  flex: 1;
}

.el-row {
  margin-bottom: 20px;
}

.el-col {
  flex: 1;
}

.el-card {
  border-radius: 5px;
}

/* 卡片统计样式 */
.el-card h2 {
  margin: 0;
  font-size: 24px;
}

.el-card p {
  margin: 0;
  font-size: 12px;
}

/* 图表区域优化 */
#userReferralPieChart,
#examItemBarChart,
#examItemPolarChart,
#storeSalesLineChart {
  height: 400px;
}
</style>
